<template>
    <div class='search'>
     <div class="ss">
      <input type="text" placeholder="搜索商品" v-model="name" @keydown.enter="sou" />
     <button @click="qk">清空</button>
     
    </div>
    <ul class="u1">
         <li v-for="(item,index) in lis" :key="index" >
             {{item.goods_name}}
         </li>
     </ul>
     <ul  v-if="this.lis.length==0">
         <li v-for="(item,index) in $store.state.newList" :key="index">
             {{item}}
         </li>
     </ul>
 </div>
</template>

<script>
import {getSearch}from "../../api/goods"
export default {
    data() {
        return {
        lis:[],
        name:'',
        page:1,
        number:10,
 };
    },
    mounted(){
 
    },
    methods:{
     sou(){
         getSearch({page:this.page,number:this.number,name:this.name}).then(res=>{
        //   console.log(res);
          this.lis=res.data.result.list
          console.log(this.lis);
      })
         if(this.name==''){
             alert('内容不能为空')
             return
         }

         this.lis=this.lis.filter(item=>{
             return item.goods_name.includes(this.name)
         })
      
         this.$store.commit('sou',this.name)
        
     },
     qk(){
         this.name=''
         this.lis=[]
        this.$store.commit('qk')
     }
 },
    components:{}
};
</script>

<style lang='scss' scoped>
html,body{
    width: 100%;
    height: 100%;
}
.ss {
   
  width: 100%;
  height: 80px;
//   line-height: 80px;
  display: flex;
  text-align: center;
  justify-content: space-between;
  input {
    width: 70%;
    height: 30px;
    text-align: center;
    border-radius: 30px;
    margin-left: 20px;
    margin-top: 10px;
  }
  button{
      width: 60px;
      height: 30px;
      margin-top: 10px;
  }
 
}
</style>
